/*

	* 委派就是将本该绑定给多个元素的事件，统一绑定给document，这样可以降低代码复杂度方便维护（直接找老大统一安排小弟做事，而不逐一找小弟做事）
	* 当然在其他点击事件触发时也会冒泡到document，所以在document的触发事件通过写条件判断来筛选相关触发元素


 */
// element即父元素 selector是css选择器，即需要进行委托的元素
function addEventListener(element, type, fn, selector) {
    if (!selector) {
        // type表示监听事件类型的大小写敏感的字符串。fn即事件发生的回调函数
        element.addEventListener(type, fn)
    }
    // 如果需要进行委托
    else {
        element.addEventListener(type, function (event) {
            // 触发的元素
            const target = event.target
            // 主要是用来判断当前DOM节点是否能完全匹配对应的CSS选择器，如果匹配成功，返回true，反之则返回false
            if (target.matches(selector)) {
                // 通过函数.call()来调用事件函数
                fn.call(target, event)
            }
        })
    }
}
